import React, { Component, useRef, useEffect, useState } from "react";
import { Button, Input, Row, Space, Table, Popover, Switch, message } from 'antd';
import moment from 'moment';
import { CmdbContent, CmdbHeader, HcpTableTooltip } from "@/components";
import cmdbres from "@/data/cmdbres";
import request from "@/utils/request";
import hcpUtils from "@/utils/hcpUtils";
import CreateTag from "./createTag";
import DeleteTag from "./deleteTag";
import '../index.less'

const ResourceTagInstance = ({ history}) => {
    const [loading, setLoading] = useState(false);
    const [tableData, setTableData] = useState([]);
    const [row, setRow] = useState([]);
    const [showCreateTag, setShowCreateTag] = useState(false);
    const [showDeleteTag, setShowDeleteTag] = useState(false);
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 10,
        total: 0,
    });

    const changeTag = async (record) => {
        try {
            const res = await request({
                ...cmdbres.updateTag(record.id),
                data: {
                    status: record.status  == 1 ? 0 : 1
                }
            });
            if (res && res.code == 200) {
                message.success(`${record.status  == 1 ? '启用标签': '禁用标签'}成功！`);
                getTableData();
            }
        } catch (error) {
            console.log('changeTag -> error', error);
        }
    };


    const getTableData = async (params = { current: 1, pageSize: 10 }) => {
        setLoading(true);
        try {
            const res = await request({
                ...cmdbres.queryTags,
                data: {
                    pageSize: params.pageSize,
                    pageNumber: params.current,
                    sort:{
                        create_time: "DESC"
                    },
                },
            });
            setLoading(false);
            if (res && res.data) {
                setPagination((pagination) => ({
                    ...pagination,
                    current: res.pageNumber,
                    pageSize: res.pageSize,
                    total: res.total, 
                }));
                res.data.map((item, index) => item.key=index);
                setTableData(res.data);
            } else {
                setTableData([]);
            }
        } catch (error) {
            console.log(error);
        } 
    };

    useEffect(() => {
        getTableData();
    }, []);

    const handleTableChange = (e) => {
        getTableData(e);
    };
    
    const columns = [
        {
            title: "标签ID",
            key: "id",
            dataIndex: "id",
            isShow: true,
            width:50,
            copyable: true,
            ellipsis: true,
        },
        {
            title: "标签名称",
            key: "tagName",
            dataIndex: "tagName",
            isShow: true,
            width: 140,
            copyable: true,
            ellipsis: true,
        },
        {
            title: "标签标识",
            key: "tagCode",
            dataIndex: "tagCode",
            isShow: true,
            width: 140,
            copyable: true,
            ellipsis: true,
        },
        {
            title: "状态",
            key: "status",
            dataIndex: "status",
            isShow: true,
            width: 100,
            copyable: true,
            ellipsis: true,
            render: (text, record, index) => {
                return (
                    <Switch 
                        checkedChildren="启用" 
                        unCheckedChildren="停用" 
                        checked={text==0}
                        onChange={()=> {changeTag(record)}}
                    />
                )
            }
        },
        {
            title: "创建时间",
            key: "createTime",
            dataIndex: "createTime",
            isShow: true,
            width: 140,
            copyable: true,
            ellipsis: true,
            render: (text, record, index) => hcpUtils.timeConversion(text, 'YYYY-MM-DD HH:mm:ss')
        },
        {
            title: "操作",
            fixed: 'right',
            width: 110,
            woIsSystem: 1,
            woIsHidden: 1,
            render: (text, record, index) => {
                return (
                <Space key={record.TagId}>
                    <Popover content="修改">
                        <span
                            className="iconfont icon-edit"
                            onClick={() => { setRow(record); setShowCreateTag(true); }}
                        />
                    </Popover>
                    <Popover content="删除">
                        <span 
                            className="iconfont icon-delete" 
                            onClick={() => { setRow(record); setShowDeleteTag(true); }}
                        />
                    </Popover>
                </Space>
                )
            }
        } 
    ]

    return (
        <CmdbContent>
            <CmdbHeader title={"资源标签"} />
            <section className="hcp__page">
                <section className="hcp__page__container">
                    <div style={{backgroundColor: "#fff", padding: "10px"}}>
                    <div style={{ display: "inline-block", width: "50%" }}>
                        <section style={{float: "left", padding: "5px 10px 10px 0"}}>
                            <Space>
                                <Button type="primary" onClick={() => {setRow(); setShowCreateTag(true);}}>
                                    新建标签
                                </Button>
                                <Button type="primary" onClick={() => {getTableData()}} >
                                    刷新
                                </Button>
                            </Space>
                        </section>
                    </div>
                    <Table
                        columns={columns}
                        loading={loading}
                        dataSource={tableData}
                        scroll={{ x: '100%' }}
                        pagination={{
                            showSizeChanger: true,
                            showQuickJumper: {
                            goButton: (
                                <Button style={{ margin: "0 10px" }}>确定</Button>
                            ),
                            },
                            ...pagination,
                        }}
                        onChange={handleTableChange}
                        hideSetting
                    />
                </div>
                </section>
            </section>
            {showCreateTag&&<CreateTag
                onCreateFinish={getTableData}
                visible={showCreateTag}
                setVisible={setShowCreateTag}
                info={row}
            />}
            <DeleteTag
                onDeleteFinish={getTableData}
                visible={showDeleteTag}
                setVisible={setShowDeleteTag}
                info={row}
            />
        </CmdbContent>
    );
};

export default ResourceTagInstance;